<template>
	<view class="wrap" :style="colorStyle">
		<view class="top_box"></view>
		<view class="main" :class="{'no_click':info.status==1||info.status==2}">
			<view class="top_img">
				<image src="../static/imgs/cert1.png" mode="aspectFill"></image>
			</view>
			<view class="form_box">
				<view class="title">
					1.上传营业执照
				</view>
				<view class="body">
					<view class="id_box">
						<view class="info_text">请上传珠宝相关行业《营业执照》照片，图片要求清晰完整无遮掩、平铺、能看清营业执照上法人、国徽等信息。</view>
						<view class="card_img flex_s">
							<view class="card_img_item" @click="upLoadOneImg('license_photo')">
								<image :src="info.license_photo" mode="aspectFill" v-if="info.license_photo"></image>
								<image src="../static/imgs/trade.png" mode="aspectFill" v-else></image>
							</view>
						</view>
					</view>
				</view>
				<view class="title">
					2.上传法人身份证
				</view>
				<view class="body">
					<view class="id_box">
						<view class="info_text">1.请上传清晰的<text style="color: #D43030;">与营业执照法人一致</text>的身份证正反面照片。</view>
						<view class="info_text">2.图片要求:边框完整且字体清晰，平铺，能看清本人的头像和姓名等信息。</view>
						<view class="card_img flex_s">
							<view class="card_img_item" @click="upLoadOneImg('front')">
								<image :src="info.id_card_front_photo" mode="aspectFill"
									v-if="info.id_card_front_photo"></image>
								<image src="../static/imgs/card_face.png" mode="aspectFill" v-else></image>
							</view>
							<view class="card_img_item" @click="upLoadOneImg('back')">
								<image :src="info.id_card_back_photo" mode="aspectFill" v-if="info.id_card_back_photo">
								</image>
								<image src="../static/imgs/card_back.png" mode="aspectFill" v-else></image>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="tip_text">
						以下信息为证件上传后系统自动识别填充，请您仔细核对填充内容是否正确。
					</view>
					<view class="input_form">
						<view class="form_item flex_s">
							<text class="label">企业名称</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.license_business_name" placeholder="请上传营业执照" />
							</view>
						</view>
						<view class="form_item flex_s">
							<text class="label">信用代码</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.license_credit_code" placeholder="请上传营业执照" />
							</view>
						</view>
						<view class="form_item flex_s">
							<text class="label">法人姓名</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.legal_person_name" placeholder="请上传营业执照" />
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="input_form">
						<view class="form_item flex_s">
							<text class="label">真实姓名</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.id_card_name" placeholder="请上传身份证" />
							</view>
						</view>
						<view class="form_item flex_s">
							<text class="label">身份证号</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.id_card_number" placeholder="请上传身份证" />
							</view>
						</view>
						<view class="form_item flex_s">
							<text class="label">有效截止</text>
							<view class="input_box flex_c">
								<input type="text" disabled v-model="info.id_card_valid_until" placeholder="请上传身份证" />
							</view>
						</view>
					</view>
					<view class="line"></view>
				</view>


				<view class="title" style="padding-top: 0;">
					3.填写您的手机号码
				</view>
				<view class="body">
					<view class="input_form">
						<view class="form_item flex_s">
							<view class="input_box flex_c mgl33">
								<input type="number" maxlength="11" v-model="info.phone_number"
									placeholder="请输入您的手机号码" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="wechat_pay flex_sb">
			<view class="left flex_s">
				<text class="iconfont icon-weixin3"></text>
				<view class="left_text">
					<text class="text1">微信支付</text>
					<text class="text2">限时特惠￥0/ 年</text>
				</view>
			</view>
			<view class="right">原价:<text class="mid_line">￥1999</text>/ 年</view>
		</view>
		<view class="footer flex_c">
			<template v-if="info.status">
				<view class="btn gray_btn" v-if="info.status==1">
					{{info.status_txt}}
				</view>
				<view class="btn"  v-if="info.status==2">
					{{info.status_txt}}
				</view>
				<view class="btn" @click="authenticate_apply"  v-if="info.status==3">
					{{info.status_txt}}
				</view>
			</template>
			<view class="btn" @click="authenticate_apply" v-else>
				提交审核
			</view>
		</view>
		<modal ref="modal" :content="info.fail_msg" :showTitle="true" :showCancel="false" @confirm="closeModal"></modal>
		<modal ref="modal2" :showCancel="false" content="提交成功，我们将在1个工作日内审核完毕，请耐心等候" @confirm="konwHandle"></modal>
	</view>
</template>

<script>
	import modal from "@/components/modal/modal.vue";
	import {
		debounceImmediate
	} from "@/utils/validate";
	import {
		uploadIdCardImg,
		uploadBusinessImg,
		authenticate_apply,
		authenticate_info
	} from "@/api/new_api.js"
	import colors from "@/mixins/color";
	export default {
		props:{
			modal
		},
		mixins: [colors],
		data() {
			return {
				status_txt: '提交审核',
				info: {
					license_photo: '', //执照图
					license_business_name: '', //企业名称
					legal_person_name: '', //法人姓名
					license_credit_code: '', //企业代码
					id_card_front_photo: '', //正面
					id_card_back_photo: '', //身份证反面
					id_card_name: '', //身份证名
					id_card_number: '', //身份证号
					id_card_valid_until: '', //有效日期
					type: 2,
					phone_number: '', //手机号

				}
			};
		},
		onLoad() {
			this.authenticate_info()
		},
		methods: {
			konwHandle() {
				this.$refs.modal2.close()
				this.authenticate_info()
			},
			closeModal(){
				this.$refs.modal.close()
			},
			authenticate_info() {
				const params={
					type:2
				}
				authenticate_info(params).then((res) => {
					const data = res.data
					if (data) {
						this.info = data
						if(data.status==3&&data.fail_msg){
							this.$refs.modal.open()
						}
					}
				})
			},
			upLoadOneImg(type) {
				this.$util.uploadImageOne('upload/image', (res) => {
					const data = res.data
					if (type === 'license_photo') {
						this.info.license_photo = data.url
						this.uploadBusinessImg() //识别营业执照
					} else {
						this.side = type
						if (type === 'front') {
							this.info.id_card_front_photo = data.url
						} else if (type == 'back') {
							this.info.id_card_back_photo = data.url
						}
						this.uploadIdCardImg() //识别身份证
					}
				}, (err) => {
					console.log(err, "失败");
				})
			},
			uploadIdCardImg() {
				const params = {
					img_url: this.side === 'front' ? this.info.id_card_front_photo : this.info.id_card_back_photo,
					idCardSide: this.side
				}
				uploadIdCardImg(params).then((res) => {
					const data = res.data
					if(data.user_name){
						this.info.id_card_name = data.user_name
						this.info.id_card_number = data.user_num
					}
					if(data.user_validity){
						this.info.id_card_valid_until = data.user_validity
					}
				}).catch((err) => {
					this.$util.Tips({
						title: err.msg
					})
				})
			},
			uploadBusinessImg() {
				const params = {
					img_url: this.info.license_photo
				}
				uploadBusinessImg(params).then((res) => {
					const data = res.data
					this.info.legal_person_name = data.legal_person
					this.info.license_business_name = data.company
					this.info.license_credit_code = data.code
				}).catch((err) => {
					this.$util.Tips({
						title: err.msg
					})
				})
			},
			authenticate_apply: debounceImmediate(function() {
				authenticate_apply(this.info).then((res) => {
					this.$refs.modal2.open()
				})
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding-bottom: 200rpx;
		position: relative;

		.mgl33 {
			margin-left: 33rpx;
		}

		.wechat_pay {
			width: 700rpx;
			border-radius: 10rpx;
			margin: 16rpx auto 0;
			padding: 28rpx 27rpx;
			background: #fff;

			.left {

				.iconfont {
					font-size: 50rpx;
					color: #43CF7C;
				}

				.left_text {
					margin-left: 16rpx;

					.text1 {
						color: #303030;
						font-size: 28rpx;
						font-weight: 550rpx;
						margin-right: 18rpx;
					}

					.text2 {
						font-size: 26rpx;
						font-weight: 550rpx;
						color: #D43030;
					}
				}
			}

			.right {
				color: #8C8C8C;
				font-size: 26rpx;

				.mid_line {
					text-decoration: line-through;
				}
			}
		}

		.footer {
			position: fixed;
			z-index: 10;
			bottom: 0;
			left: 0;
			width: 100%;
			// height: 160rpx;
			padding-bottom: 50rpx;
			padding-top: 20rpx;
			background: #fff;

			.btn {
				width: 686rpx;
				height: 97rpx;
				text-align: center;
				line-height: 97rpx;
				background-color: var(--view-theme);
				border-radius: 54rpx;
				font-size: 32rpx;
				color: #fff;

			}

			.gray_btn {
				background: #A6A6A6;
			}
		}

		.top_box {
			position: absolute;
			height: 155rpx;
			width: 100%;
			background: var(--view-theme);
		}

		.main {
			position: relative;
			overflow: hidden;

			.top_img {
				padding-top: 20rpx;
				width: 702rpx;
				height: 339rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.form_box {
				overflow: hidden;
				width: 702rpx;
				margin: 0 auto;
				background-color: #fff;
				border-radius: 8rpx;
				padding-bottom: 32rpx;

				.body {
					.counter_box {
						padding-left: 65rpx;

						.masker_box {
							width: 300rpx;
							height: 185rpx;
							border-radius: 4rpx;
							background: #F6F6F6;

							.img_box {
								width: 58rpx;
								height: 58rpx;
								border-radius: 50%;
								overflow: hidden;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}

					.input_form {
						display: grid;
						grid-row-gap: 20rpx;

						.form_item {
							padding: 0 24rpx 0 32rpx;

							.label {
								font-size: 32rpx;
								font-weight: 550;
								margin-right: 47rpx;
							}

							.input_box {
								flex-grow: 1;

								height: 80rpx;
								border-radius: 4rpx;
								background: #F6F6F6;

								input {
									width: 100%;
									padding-left: 20rpx;
								}
							}
						}
					}


					.tip_text {
						font-size: 28rpx;
						color: #808080;
						padding: 0 32rpx 32rpx;
					}

					.line {
						width: 100%;
						height: 4rpx;
						background: #F6F6F6;
						margin: 32rpx 0;
					}

					.id_box {

						padding-left: 65rpx;

						.info_text {
							font-size: 28rpx;
							color: #303030;
							line-height: 40rpx;
						}

						.card_img {
							margin-top: 20rpx;
							display: grid;
							grid-template-columns: repeat(2, 1fr);
							grid-column-gap: 13rpx;

							.card_img_item {
								width: 300rpx;
								height: 185rpx;
								border-radius: 4rpx;
								overflow: hidden;
								background: #F6F6F6;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}

				.title {
					font-size: 32rpx;
					font-weight: 550;
					margin-bottom: 18rpx;
					padding-top: 32rpx;
					padding-left: 32rpx;
				}
			}
		}

	}
</style>